<template>
    <div id="app">
        <headerComponent></headerComponent>
        <router-view class="content-wrapper"></router-view>
    </div>
</template>

<script>
import { getCategoryList, getDebListByCategory } from "./util/myRequests";
import headerComponent from "./components/header";

export default {
    name: "App",
    components: { headerComponent },
    mounted() {
        getCategoryList()
            .then(list => {
                this.$store.commit("setCategoryList", list);
                getDebListByCategory(list[0].id, 1)
                    .then(res => {
                        this.$store.commit("setHomePageDebList", res);
                    })
                    .catch(error => console.log(error));
            })
            .catch(error => console.log(error));
    }
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* text-align: center; */
    color: #2c3e50;
    overflow-x: hidden;
}

.content-wrapper {
    margin-top: 20px !important;
    margin: 0 auto;
    width: 70%;
}
</style>
